<template>
    <div class="home">
        <!-- <div class="top">
            <div class="time">{{ getCurrentTime }}</div>
            <img src="@/assets/title.png" alt="">
        </div>
        <div class="left">
            <Weather></Weather>
            <People :dateGuanLi="dateGuanLi"></People>
            <Yujing></Yujing>
        </div>
        <div class="right">
            <findEvent></findEvent>
            <detailsEvent></detailsEvent>
        </div> -->
        <div class="map">
            <Map :markerData="markerData"></Map>
        </div>
        <!-- <div class="btn" v-if="isPeole">
            <btnPeole></btnPeole>
        </div>

        <Bottom @showPeole="showPeole"></Bottom> -->
    </div>
</template>
<script setup>
// import Map from "@/components/map1"
import Map from "@/components/map"
import Weather from "@/components/weather"
import People from "@/components/Peole/index.vue"
import Yujing from "@/components/yujing/index.vue"
import Bottom from "@/components/botom/index.vue"
import findEvent from "@/components/findEvent/index.vue"
import detailsEvent from "@/components/detailsEvent/index.vue"
import btnPeole from "@/components/btnPeole/index.vue"
import { onMounted, ref, computed, onUnmounted, nextTick, onBeforeMount, reactive } from 'vue'
import { debounce } from '@/utils/debound.js'
import { peopleData } from "@/api/home.js"
import dataJson from '@/utils/gg.json'

const currentTime = ref(new Date());

// 创建计算属性，实时获取当前时间
const getCurrentTime = computed(() => {
    // var d = new Date();
    var year = currentTime.value.getFullYear();
    var month = currentTime.value.getMonth();
    month = month + 1 > 12 ? 1 : month + 1;
    month = month > 9 ? month : "0" + month.toString();
    var day = currentTime.value.getDate();
    var hour = currentTime.value.getHours();
    hour = hour > 9 ? hour : "0" + hour.toString();
    var minute = currentTime.value.getMinutes();
    minute = minute > 9 ? minute : "0" + minute.toString();
    var second = currentTime.value.getSeconds();
    second = second > 9 ? second : "0" + second.toString();
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
});

// 开始获取当前时间
const startClock = () => {
    setInterval(() => {
        currentTime.value = new Date();
    }, 1000);
};
function getDate() {
    peopleData().then((result) => {
        console.log(result, 33);
    }).catch((err) => {
        console.log(err, 12);
    });
}
//  重点人员显示
let isPeole = ref(false)
function showPeole(obj) {
    isPeole.value = obj.show
}
// let timer = null
// timer = setInterval(() => {
//     console.log('aa');
// }, 10)
// const debouncedIncrement = debounce(fn, 100);
const getDataMarker = () => {
    markerData.value = dataJson.features.filter((item) => {
        return item.geometry.type == 'Point'
    })
}
const markerData = computed(() => {
    return (dataJson.features.filter((item) => {
        return item.geometry.type == 'Point'
    }));
});

// 预警管理
let obj = {
    showShiJian: {
        all: 3,
        complete: 3,
        processed: 5,
    },
    barOptions: {
        xAxis: {
            type: 'category',
            data: ['一般', '山洪', '大风', '冰雹', '地质灾害', '危房',]
        },
        yAxis: {
            min: 0,
            max: 12,
            type: 'value',

        },
        series: [
            {

                data: [3, 1, 0, 0, 0, 2],
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color:'#fff',
                    },
                    formatter: '{@value}人'
                }
            }
        ]
    }
}
let dateGuanLi = reactive(obj)
onMounted(() => {
    startClock();
    getDate()
})
onUnmounted(() => {
    clearInterval(startClock);
})

</script>
<style scoped>
.home {
    --bj-color: rgba(4, 58, 106);
    --btn-color: rgba(26, 48, 69, 1);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    font-size: 0.16rem;
}

.map {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.left {
    margin-top: 0.6rem;
    float: left;
    z-index: 2;
    position: relative;
    margin-left: 0.2rem;
}


.right {
    margin-top: 0.6rem;
    position: relative;
    float: right;
    z-index: 2;
    margin-right: 0.2rem;
}

.bottom {
    position: absolute;
    bottom: 2%;
    left: 25%;
    z-index: 2;
}

.btn {
    position: absolute;
    bottom: 12%;
    left: 25%;
    z-index: 2;

}

.top {
    width: 100%;
    height: 0.8rem;
    position: absolute;
    top: 1%;
    left: 0%;
    z-index: 2;
}

.top img {
    width: 100%;
    height: 100%;
    display: block;
}

.time {
    position: absolute;
    top: 0%;
    right: 13%;
    width: 10%;
    height: 0.3rem;
    line-height: 0.3rem;
    border: 0.04rem solid var(--btn-color);
    background: var(--bj-color);
    border-radius: 0.3rem;
    text-align: center;
}
</style>